<template>
  <el-container class="setting-center_mall-info-setting_commercial-activities">
    <el-main>
      <el-card shadow="never" class="commercia-tenant-list-title tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="openModal('0', 1, false)">新增</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          stripe
          resizable
          highlight-hover-row
          show-overflow
          :tree-config="{children: 'children'}"
          :loading="loading"
          :auto-resize="true"
          :data="activitiesList"
          height="500"
          :print-config="{}"
        >
          <vxe-table-column
            tree-node
            field="name"
            width="380"
            title="业态名称"
          />
          <vxe-table-column
            field="remark"
            min-width="120"
            title="业态描述"
          />
          <vxe-table-column field="publishStatus" width="80" align="center" title="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeState(scope)" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            title="操作"
            fixed="right"
            width="220"
            align="center"
            slots="default"
          >
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openModal(scope.row.id, 2, true)">查看</el-button>
              <el-button v-if="scope.row.publishStatus == 0" type="text" size="mini" @click="openModal(scope.row.id, 2, false)">编辑</el-button>
              <el-button v-if="scope.row.publishStatus == 0" type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
              <el-button type="text" size="mini" @click="openModal(scope.row.id, 1, false)">添加下级</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getRentList()"
        />
      </el-card>
    </el-main>
    <el-dialog v-if="dialogVisible" width="30%" title="业态信息" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="params" :rules="rules" label-width="6rem">
        <el-row :gutter="40">
          <el-col :span="24">
            <el-form-item prop="code" label="业态编码：">
              <el-input v-model="params.code" :disabled="diabledEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="name" label="业态名称：">
              <el-input v-model="params.name" :disabled="diabledEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="sort" label="业态排序：" class="flex-just">
              <el-input-number v-model="params.sort" :disabled="diabledEdit" :max="100" :min="1" :precision="0" :controls="!diabledEdit" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="remark" label="业态描述：">
              <el-input v-model="params.remark" type="textarea" rows="3" :disabled="diabledEdit" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { delBrandStyle, getBrandStylePageList, addBrandStyle, modifyBrandStyle, getBrandStyle, changeBrandStyleStatus } from '@/api/tenement'
export default {
  data() {
    return {
      activitiesList: [],
      loading: false,
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      params: {},
      dialogVisible: false,
      diabledEdit: false,
      rules: {
        name: [{ required: true, message: '请输入业态名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入业态编码', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入业态排序', trigger: 'blur' }]
      },
      parentId: '',
      type: '1'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openModal(id, type, bool) {
      this.diabledEdit = bool
      this.params = {}
      this.dialogVisible = true
      this.type = type
      this.params.type = 1
      if (type === 2) {
        this.getInfo(id)
      } else {
        this.params.parentId = id
      }
    },
    getInfo(id) {
      getBrandStyle(id).then(response => {
        this.params = response
      })
    },
    getList() {
      getBrandStylePageList({
        type: 1,
        parentId: '0'
      }).then(response => {
        this.activitiesList = response
      })
    },
    submit() {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.type === 1) {
            addBrandStyle(this.params).then(response => {
              this.$message.success('添加成功')
              this.dialogVisible = false
              this.getList()
            })
          } else {
            modifyBrandStyle(this.params).then(response => {
              this.$message.success('修改成功')
              this.dialogVisible = false
              this.getList()
            })
          }
        }
      })
    },
    del(id) {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBrandStyle(id).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    changeState(scope) {
      changeBrandStyleStatus({ id: scope.row.id, status: scope.row.publishStatus }).then(res => {})
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-info-setting_commercial-activities {

}
</style>
